<!-- -->
<template>
  <div class="login">
    <div class="header">
      <Header>手机号登录</Header>
    </div>
    <div class="content">
      <van-form @submit="onSubmit">
        <van-field
          v-model="value.phone"
          name="手机号"
          label="手机号"
          placeholder="手机号"
          :rules="[{ validator, message: '请填写正确的手机号' }]"
        />

        <van-field
          v-model="value.code"
          name="短信验证码"
          label="短信验证码"
          placeholder="请输入短信验证码"
          :rules="[{ required: true, message: '请填写验证码' }]"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              :disabled="btnDisabled"
              native-type="button"
              @click="getCode"
            >{{ btnText }}</van-button>
          </template>
        </van-field>

        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
    <div class="footer"></div>
  </div>
</template>

<script>
import { login, sendCode } from "@/api";
import { Toast } from "vant";
import Header from "../../components/Header";
import { UserInfo } from "@/utils";
export default {
  name: "login",
  // import引入到组件需要注入到对象中才能使用
  components: { Header },
  data() {
    // 这里存放数据
    return {
      value: {
        code: "",
        phone: ""
      },
      checkCode: null,
      phoneRules: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
      btnDisabled: false,
      btnText: "发送验证码"
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监听data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 手机号正则验证
    validator(values) {
      return /^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(values);
    },
    // 获取验证码
    getCode() {
      // 点击获取验证码时 先判断 手机号输入是否为空 如果是的话直接return
      if (!this.value.phone) {
        this.$toast("请输入手机号");
        return;
      } else if (!this.validator(this.value.phone)) {
        this.$toast("请输入正确的手机号");
        return;
      }
      // 请求验证码
      this.getCheckCode();
      // 按钮禁用
      this.btnDisabled = true;
      // 倒计时的时长30s
      let time = 5;
      // 定时器
      let timer = null;
      timer = setInterval(() => {
        // 让每一秒 让总时长减1
        time = time - 1;
        // 让发送验证码的按钮 文字变化
        this.btnText = `${time}s后重试`;
        // 如果时长为0 的话
        if (time <= 0) {
          clearInterval(timer);
          // 取消按钮禁用
          this.btnDisabled = false;
          // 按钮文字变化
          this.btnText = "发送验证码";
        }
      }, 1000);
    },
    // 登录
    onSubmit() {
      if (this.value.code * 1 === this.checkCode * 1) {
        login({
          phone: this.value.phone,
          code: this.checkCode
        }).then(res => {
          Toast({
            message: res.msg,
            position: "top"
          });
          // 本地存储token
          localStorage.setItem("token", res.data);

          // 跳转首页
          this.$router.push("/");
          // 获取用户信息 没有token 的情况下
          UserInfo();
        });
      } else {
        this.$toast("请输入正确的验证码");
      }
    },
    // 验证码接口
    getCheckCode() {
      sendCode().then(res => {
        this.checkCode = res.data;
        this.$toast({ message: `验证码:${res.data}`, duration: 3000 });
      });
    }
  },
  //生命周期 - 创建完成 (可以访问当前this实例)
  created() {},
  //生命周期 - 挂载完成 (可以访问DOM元素)
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header,
.footer {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header > .icon {
  width: 25px;
}
.header > p {
  font-size: 16px;
  font-weight: bold;
}
.content {
  flex: 1;
}
.content > button {
  border-width: 0px;

  width: 290px;
  height: 40px;
  background: inherit;
  background-color: rgba(22, 155, 213, 1);
  border: none;
  border-radius: 5px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  margin-left: 15px;
}
</style>
